<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导出</title>
    <style>
        .main {
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }

        .title {
            font-weight: bold;
            padding-bottom: 10px;
            margin-bottom: 20px;
            border-bottom: 1px solid #8c8a8a;
        }

        .input-text{
            width: 300px;
            height: 30px;
            margin-left: 15px;
            border-radius: 5px;
            padding-left: 5px;
            border: 1px solid rgb(209,209,209);
        }
        .input-text-short{
            width: 222px;
            height: 30px;
            margin-left: 15px;
            border-radius: 5px;
            padding-left: 5px;
            border: 1px solid rgb(209,209,209);
        }
        .line {
            margin-bottom: 12px;
        }

        .line span{
            color: red;
        }

        .footer {
            margin-top: 25px;
            margin-left: 5%;
        }

        .foot-btn{
            width: 80px;
            height: 40px;
            border-radius: 5px;
            border: 1px solid rgb(209,209,209);
            background-color: #409eff;
            color: #fff;
        }

        .export-sql {
            margin-bottom: 100px;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="content">
        <div class="export-sql">
            <div class="title">导出数据库文档 (目前仅支持mySql)</div>
            <div id="form-sql">
                <div class="line">
                    <span>*</span>
                    数据库IP端口:<input class="input-text-short" type='text' id='dbIp' value='' size="10"/> :
                    <input type='text' size="7" id='dbPort' value='3306' style="height: 30px;padding-left: 5px;border-radius: 5px; border: 1px solid rgb(209,209,209);"/><br/>
                </div>
                <div class="line" style="padding-left: 30px;">
                    <span>*</span>
                    数据库名:<input class="input-text"  type='text' id='dbName' value=''/><br/>
                </div>
                <span class="default" id="name"></span>
                <div class="line" style="padding-left: 62px;">
                    <span>*</span>
                    账号:<input class="input-text"  type='text' id='jdbcUsername' value='root'/>
                </div>
                <div class="line" style="padding-left: 62px;">
                    <span>*</span>
                    密码:<input class="input-text"  id='jdbcPassword' value=''/>
                </div>
                <div class="line" style="padding-left: 14px;">
                    <span>*</span>
                    导出文档名:<input class="input-text"  type='text' id='dbExportName' value="项目数据库文档" placeholder="项目数据库文档"/>
                </div>
                <div class="line" style="padding-left: 44px;">
                    排除表名:<input class="input-text"  type='text' id='excludeStr'/><br/><span style="color:red">(支持模糊,多个排除用 英文逗号分隔 ',')</span>
                </div>
                <div class="footer">
                    <button class="foot-btn" type="button" onclick="exportSqlBtn()">导出</button>
                </div>
            </div>
        </div>
        <div class="export-api">
            <div class="title">导出接口文档 (目前仅支持word)</div>
            <div id="form-api">
                <div class="line" style="padding-left: 5px;">
                    <span>*</span>
                    swagger-url:<input class="input-text"  type='text' id='swaggerUrl' value=''/>
                    <br/>
                    eg: http://10.10.77.159:7002/oauth2/v2/api-docs(登陆文档首页后在标题下即可找到)
                </div>
                <span id="hint"></span>
                <div class="line">
                    <span>*</span>
                    导出文档名称:<input class="input-text"  type='text' id='apiExportName' placeholder="该名称同时做内容标题使用"/>
                </div>
                <div class="footer">
                    <button class="foot-btn" type="button" value="" onclick="exportApiBtn()">导出</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

    // var url = "http://localhost:10010";
    var url = "http://61.164.53.62:8126";

    function exportSqlBtn() {
        var dbIp = $("#dbIp").val().trim();
        var dbPort = $("#dbPort").val().trim();
        var dbName = $("#dbName").val().trim();
        var jdbcUrl = 'jdbc:mysql://' + dbIp + ':' + dbPort + '/' + dbName;
        var jdbcUsername = $("#jdbcUsername").val().trim();
        var jdbcPassword = $("#jdbcPassword").val().trim();
        var dbExportName = $("#dbExportName").val().trim();
        var excludeStr = $("#excludeStr").val().trim();
        if (isEmpty(jdbcUrl) || isEmpty(jdbcUsername) || isEmpty(jdbcPassword) || isEmpty(dbExportName)) {
            alert("数据不能为空");
            return;
        }

        window.open(url + "/db2word?jdbcUrl=" + jdbcUrl + "&jdbcUsername=" + jdbcUsername + "&dbExportName=" + dbExportName + "&excludeStr=" + excludeStr + "&jdbcPassword=" + encodeURIComponent(jdbcPassword));
        console.log("导出数据库文档")
    }

    function exportApiBtn() {
        var swaggerUrl = $("#swaggerUrl").val().trim();
        var apiExportName = $("#apiExportName").val().trim();
        if (isEmpty(swaggerUrl) || isEmpty(apiExportName)) {
            alert("数据不能为空");
            return;
        }
        window.open(url + "/swagger2word?swaggerUrl=" + swaggerUrl + "&apiExportName=" + apiExportName);
    }

    function isEmpty(data) {
        return data.length === 0 || data === null || data === undefined;
    }

</script>
</html>

